<template>
	<div class="shopcart">
		<div class="s-content" @click="toggleList">
			<div class="s-content-left">
				<div class="s-logo-wraper">
					<div class="s-logo" :class="{'heighlight':totalcount>0}"><i class="icon-shopping_cart"></i></div>
					<div class="num" v-show="totalcount>0">{{totalcount}}</div>
				</div>
				<div class="s-price" :class="{'heighlight':totalprice>0}"> {{totalprice}}</div>
				<div class="s-descript">本店满20元配送</div>
			</div>
			<div class="s-content-right" >
				<div class="s-pay" @click.stop.prevent="topay" :class="totalprice>minprice? 'enough':'notenough'">选别的</div>
			</div>
		</div>
		<div class="ball-container">
			<transition-group  name="balld"  v-on:before-enter="beforeEnter"  v-on:enter="enter"  v-on:after-enter="afterEnter">
			<div v-for="(ball,index) in balls" v-show="ball.show" :key="index" class="ball">
				<div class="b-inner inner-hook"></div>
			</div>
			</transition-group>
		</div>
		<transition name="fold">
		<div class="shop-list" v-show="listshow">
		<div class="list-header">
			<h1 class="l-title">购物车</h1>
			<span class="decler" @click="empty">清空</span>
		</div>
		<div class="list-content" ref="listcontent">
			<ul>
				<li v-for="(food,index) in selectFood" class="food" :key="index">
					<span class="f-name">{{food.foodname}}({{food.listName}})</span>
					<div class="f-price">
						<span>￥{{food.price*food.num | tosecond}}</span>
					</div>
					<div class="cartcontrolwarper">
						<change v-on:chan="chang" :food="food" :index="index"></change>
					</div>
				</li>
			</ul>
		</div>
	</div>
	</transition>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import change from './change'
	export default{
		name:"shopcart",
	    data(){
	    	return {
	    		balls:[
	    			{
	    				show:false
	    			},
	    			{
	    				show:false
	    			},
	    			{
	    				show:false
	    			},
	    			{
	    				show:false
	    			},
	    			{
	    				show:false
	    			}
	    		],
	    		dropBalls:[],
	    		fold:true,
	    		minprice:0,
	    		deliverPrice:4
	    	}
	    },
		props:['selectFood','aa'],
		computed:{
			listshow:function(){
				if(!this.totalcount){
					this.fold=true;
					return false;
				}
				var show=!this.fold;
				if(show){
					this.$nextTick(function(){
						if(!this.scroll){
							this.scroll=new BScroll(this.$refs.listcontent,{
							click:true
						})}
							else{
								this.scroll.refresh();
							}
						}
					);}
				return show;
			},
			totalprice:function(){
				var total=0;
				this.selectFood.forEach(function(food){
					total+=food.price*food.num;
				});
				total=parseFloat(total).toFixed(2)
				
				return total;
			},
			totalcount:function(){
				var count=0;
				this.selectFood.forEach(function(food){
					count+=food.num;
				});
				
				return count;
			},
			paydesc:function(){
				if(this.totalprice===0){
					return '￥'+this.minprice+'元起送';
				}
				else if(this.totalprice<this.minprice){
					var dif=this.minprice-this.totalprice;
					return '还差'+dif+'元起送';
				}
				else if(this.totalprice>=this.minprice){
					return "去结算";
				}
			}
		},
		filters:{
			tosecond:function(data){
				return data.toFixed(2)
			}
		},
		methods:{
			topay:function(){
				this.$emit("save")
			},
			empty:function(){
				this.selectFood.forEach((food) => {
					food.num=0;
				})
			},
			chang:function(aa){
				this.aa[0].a=0;
			},
			toggleList:function(){
				if(!this.totalcount){
					return;
				}
				this.fold=!this.fold;
			},
			drop:function(el){
				for(let i=0;i<this.balls.length;i++){
					let ball=this.balls[i]
					if(!ball.show){
						ball.show=true
						ball.el=el
						this.dropBalls.push(ball)
						return
					}
				}
			},
			beforeEnter: function(el){
						let count=this.balls.length
						while(count--){
							let ball=this.balls[count]
							if(ball.show){
								let rect=ball.el.getBoundingClientRect();
							  let x=rect.left-20;
							  let y=-(rect.top);
							  el.style.display=''
							  el.style.webkitTransform='translate3d(0,'+y+'px,0)'
							  el.style.transform='translate3d(0,'+y+'px,0)'
							  let inner=el.getElementsByClassName("inner-hook")[0]
							  inner.style.webkitTransform='translate3d('+x+'px,0,0)'
							  inner.style.transform='translate3d('+x+'px,0,0)'
							}
						}
					},
					enter: function(el,done){
						let rf=el.offsetHeight
						this.$nextTick(function(){
							 el.style.webkitTransform='translate3d(0,0,0)'
							  el.style.transform='translate3d(0,0,0)'
							  let inner=el.getElementsByClassName("inner-hook")[0]
							  inner.style.webkitTransform='translate3d(0,0,0)'
							  inner.style.transform='translate3d(0,0,0)'
						})
						done()
					},
					afterEnter: function(el){
						var _this=this
						setTimeout(function(){
						let ball=_this.dropBalls.shift()
						if(ball){
							ball.show=false
							el.style.display="none"
						}
						},800)
					},
		},
		components:{
			change
		}
	}
</script>

<style scoped="scoped">
	.cartcontrolwarper{
		position: absolute;
		right: 0;
		bottom: 12px;
		color: rgb(0,160,220);
	}
	.decrease1{
		display: inline-block;
		transition: all 1s linear;
	}
	.c-inner{
		display: inline-block;
		opacity: 0.3;
		width: 20px;
		height: 20px;
		font-size: 20px;
		line-height: 20px;
		padding: 6px;
		background: black;
		border-radius:50% ;
		text-align: center;
		transition: all 1s linear;
	}
	.c-count{
		display: inline-block;
		padding: 6px;
	}
	.increase{
		opacity: 0.3;
		text-align: center;
		width: 20px;
		height: 20px;
		display: inline-block;
		padding: 6px;
		font-size: 20px;
		line-height: 20px;
		background: blue;
		border-radius:50% ;
	}
	.shopcart{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 48px;
		z-index: 50;
		background-color: black;
	}
	.s-content{
		display: flex;
		background-color: #141d27;
		
	}
	.s-content-left{
		flex: 1;
		
	}
	.s-content-right{
		flex:0 0 105px;
		width: 105px;
		
	}
	.s-logo-wraper{
		display: inline-block;
		position: relative;
		top: -0.2rem;
		margin: 0px 0.11rem;
		padding: 0.13rem;
		width: 1.17rem;
		height: 1.17rem;
		box-sizing: border-box;
		vertical-align: top;
		border-radius:50% ;
		background: #141d27;
	}
	.s-logo{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #2b343c;
		font-size: 0.6rem;
        color: #80858a;
        line-height: 1rem;
        font-weight: 700;
	}
	.s-price{
		display: inline-block;
		vertical-align: top;
		line-height: 0.5rem;
		margin-top: 0.2rem;
		box-sizing: border-box;
		padding-right:  0.2rem;
		border-right: 1px solid rgba(255,255,255,0.1);
		font-size: 0.32rem;
		font-weight: 700;
		color: rgba(255,255,255,0.4);
	}
	.s-descript{
		display: inline-block;
		vertical-align: top;
		line-height: 0.5rem;
		margin: 0.25rem 0.25rem;
		color: rgba(255,255,255,0.4);
		font-size: 0.2rem;
	}
	.s-pay{
		line-height: 1rem;
		height: 100%;
		text-align: center;
		font-size: 0.25rem;
		color: rgba(255,255,255,0.4);
		font-weight: 700;
		background: #2b333b;
	}
	.num{
		position: absolute;
		top: 0;
		right: 0;
		width: 24px;
		height:16px;
		line-height: 16px;
		text-align: center;
		border-radius: 16px;
		font-size: 9px;
		font-weight: 700;
		color: white;
		background-color: rgb(240,20,20);
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
	}
	.s-logo.heighlight{
		background-color: rgb(0,160,220);
	}
	.s-price.heighlight{
		color: rgb(0,160,220);
	}
	.s-pay.notenough{
		background: #2b333b;
	}
	.s-pay.enough{
		background:#00b43c ;
		color: #FFFFFF;
	}
	.ball-container{
		
	}
	.ball{
	   position: fixed;
	   left: 32px;
	   bottom: 22px;
	   z-index: -200;
	   transition:all 0.4s cubic-bezier(0.49,-0.79,0.75,0.41); 
	}
	.b-inner{
		width: 16px;
		height: 16px;
		border-radius:50% ;
		background: #00a0dc;
		transition:all 0.4s cubic-bezier(0.49,0.29,0.75,0.41);
	}
	.shop-list{
		background: red;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		transform: translate3D(0,-100%,0);
	}
	.fold-enter-active,.fold-leave-active{
		transition: all 0.5s linear;
	}
	.fold-enter,.fold-leave-to{
		transform: translate3D(0,0,0);
	}
	.list-header{
		height: 40px;
		line-height: 40px;
		padding: 0 18px;
		background: #F3F5F7;
		border-bottom:1px solid rgba(7,17,27,0.1) ;
	}
	.l-title{
		float: left;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.decler{
		float: right;
		font-size: 12px;
		color: rgb(0,160,220);
	}
	.list-content{
		padding: 0,18px;
		max-height: 217px;
		background: #fff;
		overflow: hidden;
	}
	.food{
		position: relative;
		padding: 12px 0;
		box-sizing: border-box;
		border-bottom: 1px solid black;
		height: 1rem;
	}
	.f-name{
		float: left;
		margin-left: 20px;
		line-height: 24px;
		font-size: 14px;
		color: rgb(7,17,27);
		}
	.f-price{
		position: absolute;
		right: 110px;
		bottom: 12px;
		line-height: 24px;
		font-size: 14px;
		color: rgb(240,20,20);
		font-weight: 700;
	}
	.cartcontrolwarper{
		position: absolute;
		right: 0;
		bottom: 8px;
	}
</style>